iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
1
Mobile Development

Android × CI/CD 如何用基本的MVVM專案實現 CI/CD 系列 第 24

Day 24 沒有後端提供API怎辦? 只好自己寫啦(Google Apps Script)

  • 分享至 

  • xImage
  •  

相信在開發過程中應該有碰過偶爾要等後端工程師開api之後再串接
像是昨天要串API 也是因為沒有自己的API所以才找個其他人寫好的API端口當範例
那今天會用Google Apps Script做一個簡易後端 來跟後端工程師搶飯碗
來加速開發

不過因為寫的是簡易後台 回傳資料是寫死的 也不會拿去串接DB
所以基本上就是規格開完以後 你家後端工程師忙到爆炸 你自己想偷跑時方便串接用的

那麼廢話不多說 先去google雲端硬碟新增一個試算表
https://ithelp.ithome.com.tw/upload/images/20191008/20120279CFDPgaXkRF.png

資料大概長這樣
https://ithelp.ithome.com.tw/upload/images/20191008/20120279aB2HC7IuHQ.png

懶的建置可以直接點我下載

接著點選工具->指令碼編輯器
https://ithelp.ithome.com.tw/upload/images/20191008/201202792q5yMpwEll.png

會看到下面的畫面
https://ithelp.ithome.com.tw/upload/images/20191008/20120279PrpKxxtJng.png

程式碼

function doGet() {
  var result ={};
  result.web =[];
  result.mobile =[];
  return  ContentService.createTextOutput(JSON.stringify(result))
  .setMimeType(ContentService.MimeType.JSON);
}

完成後儲存
另外 Autocomplete 在編輯 ->內容協助 (快捷顯示CTRL+SPACE但我按了沒反應)

接著點選
發布 -> 部屬為網路應用程式

設定
https://ithelp.ithome.com.tw/upload/images/20191008/20120279rEHWFFEfyJ.png
完成後部屬

部屬成功後
https://ithelp.ithome.com.tw/upload/images/20191008/20120279PprO8UBric.png
複製url
或是點選連結看結果

result

{"web":[],"mobile":[]}

接著來binding 資料

code:

function doGet() {
  var result ={};
  
  var mobile = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Mobile')
    .getDataRange()
    .getValues();
  
   var web = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Web')
    .getDataRange()
    .getValues();
  
  result.web = makeObject(web);
  result.mobile = makeObject(mobile);
  
  Logger.log(result.web);
//  return  ContentService.createTextOutput(JSON.stringify(result))
//  .setMimeType(ContentService.MimeType.JSON);
}

function makeObject(multiArr){
  var obj = {};
  var headers = multiArr.shift();
  for(var i =0 ; i<headers.length; i++){
    obj[headers[i]] = multiArr.map(function(app) {
      return app[i];
    });
  }
      
  return obj;
}

完成後先別發布 直接運行
https://ithelp.ithome.com.tw/upload/images/20191008/20120279cXdw2540zo.png

https://ithelp.ithome.com.tw/upload/images/20191008/201202798NEGft1SSC.png

看到授權都允許就對了

接著去
查看 -> 紀錄
可以看到運行的結果(log)
https://ithelp.ithome.com.tw/upload/images/20191008/20120279Hfs9LLVm7u.png

沒問題後把log取消 換回return

function doGet() {
  var result ={};
  
  var mobile = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Mobile')
    .getDataRange()
    .getValues();
  
   var web = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Web')
    .getDataRange()
    .getValues();
  
  result.web = makeObject(web);
  result.mobile = makeObject(mobile);
  
  return  ContentService.createTextOutput(JSON.stringify(result))
  .setMimeType(ContentService.MimeType.JSON);
}

function makeObject(multiArr){
  var obj = {};
  var headers = multiArr.shift();
  for(var i =0 ; i<headers.length; i++){
    obj[headers[i]] = multiArr.map(function(app) {
      return app[i];
    });
  }
      
  return obj;
}

然後部屬
接著你應該可以看到類似這樣的回傳值

{"web":{"Web Graphic":["Adobe Spark","Google Draw","Sumo Paint","Draw.io","Awwapp","Canva"],"Web Photos":["Fotor","PicMonkey","Pixlr","LunaPic","Google Photos","Polaar"],"Web Video":["Wevideo","PowToon","stop motion animation","Adobe Spark","Animoto","Magisto"],"Web Autio":["Twisted Wave","Soundtrap","AudioTool","Chirbit","Incredibox","Bosca Ceoil"],"Web Writing":["Google Docs","Google Slides","Google Keep","Blogger","Storyboard","Flippity MaadLibs"],"Web Review":["Flippity Quiz","Kahoot","Quizziz","Flippity Badge","Google Forms","Flippity"],"Web Silly":["Bitmoji","Meme Generator","Google Photos","Emojipedia","Giphy","frinkiac"],"Web Publication":["Blogger","Google Slides","Movenote","Google Sites","Book Creator","Flipgrid"]},"mobile":{"Mobile Writing":["Google Docs","Google Slides","Blogger","Google Keep","Simplenote","Evernote"],"Mobile Photos":["Prisma","Photoshop Mix","Pixlr","Snapseed","Google Photos","Desygner"],"Mobile Graphics":["Adobe lllustrator","Google Keep","AutoDesk Sketchbook","Simple Mind","Awwapp","LensooCreate"],"Mobile Audio":["Cross DJ Free","Soundtrap","Music Maker Jam","Cross DJ Free","Soundtrap","Music Maker Jam"],"Mobile Video":["We Video","Magisto","Lapselt","Google Photos","Magisto","Lapselt"],"Mobile Silly":["Bitmoji","Meme Generator","Motion Stills","Gboard","Giphycam","Frinkiac"]}}

接著新增一個新的script 並且改為post形式來接收參數
https://ithelp.ithome.com.tw/upload/images/20191008/20120279ooAWg0MMBe.png

PostExample

function doPost(e)  {
  
  var search = e.parameter.search;
  
  var count = e.parameter.count;
  var URL = 'formUrl'
  
  var response = UrlFetchApp.fetch(URL);
  
  var parsedResponse = JSON.parse(response);
  var ss = parsedResponse.mobile[search];
  
//  Logger.log(parsedResponse.mobile[search]);
 var json = {
    'resultCode':200, 
    'DB': ss[count]
}; 
  
var result ={};
  result.web =[];
  result.mobile =[];
  return  ContentService.createTextOutput(JSON.stringify(json))
  .setMimeType(ContentService.MimeType.JSON);
}

formUrl為之前部屬的script的url

接著用postman來呼叫看看 (當然你可以使用其他方式post)
https://ithelp.ithome.com.tw/upload/images/20191008/20120279IlBLmWuoox.png

這樣就實作完簡易的post get api啦~~
apps script還有很多更複雜的用法 有興趣可以自行去看看別人的範例


上一篇
Day23 call API & tests
下一篇
Day25 jenkins安裝與設定
系列文
Android × CI/CD 如何用基本的MVVM專案實現 CI/CD 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言